<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dropTarget {
            width: 400px;
            height: 400px;
            border: 1px solid gold;
        }
    </style>
</head>
<body>
<div id="dropTarget">
    拖放文件在此处
</div>
<div id="output">

</div>
<script>
    let dropTarget = document.getElementById("dropTarget");

    function handleEvent(event) {
        let info = "",
            output = document.getElementById("output"), files, i, len;
        event.preventDefault();
        if (event.type == "drop") {
            files = event.dataTransfer.files;
            i = 0;
            len = files.length;
            while (i < len) {
                info += `${files[i].name} (${files[i].type}, ${files[i].size} bytes)<br>`;
                i++;
            }
            output.innerHTML = info;
        }
    }

    dropTarget.addEventListener("dragenter", handleEvent);
    dropTarget.addEventListener("dragover", handleEvent);
    dropTarget.addEventListener("drop", handleEvent);

</script>
</body>
</html>